import React, { useState, lazy, Suspense, createContext, useReducer } from 'react'
import './App.css';
import Home from './view/home'
// 导入路由 
import {  Route, Redirect,Switch } from 'react-router-dom'
import { defaultState, reducer } from './store/index'
import AuthRoute from './components/AuthRoute'
export const Context = createContext(null)
// lazy
const Login = lazy(() => import('./view/login')) // 登录
const register = lazy(() => import('./view/register')) // 注册页
const HouseInfo  = lazy(() => import('./view/houseInfo'))
const Null = lazy(() => import('./components/404'))

function App () {
    const [state, dispatch] = useReducer(reducer, defaultState)
  return (
		<div className='App'>
			<Context.Provider value={{ state, dispatch: dispatch }}>
				<Suspense fallback={<h3 className='loading'>Loading...</h3>}>
					<Switch>
						<Route exact path='/' render={() => <Redirect to='/home' />} />
						<Route path='/home' component={Home} />
						<Route path='/login' component={Login} />
						<Route path='/register' component={register} />
						<Route path='/404' component={Null} />
						{/* <Route path='/houseInfo' component={HouseInfo} /> */}
						<AuthRoute path='/houseInfo' component={HouseInfo}></AuthRoute>
						<Route exact path='*' render={() => <Redirect to='/404' />} />
					</Switch>
				</Suspense>
			</Context.Provider>
		</div>
  )
}

export default App;
